import React, { useEffect, useState } from 'react';
import { TimerStyle } from './style'

export const EmptyData = (props) => {

  const whoEmptyData = props.who ? props.who : '暂无数据'

  return(
    <div className="empty flex-column">
      <img 
        style={{
          marginTop: '45%',
          width: '4.82rem',
          height: 'auto'
        }}
      src="https://res.lexiangpingou.cn/images/826/2020/10/bMc9w3JImMM9FJNWm11uyigd1FuV5W.png" alt=""/>
      <p
        style={{
          color: '#474747',
          fontSize: '.39rem',
          marginTop: '1.3rem'
        }}
      >
        { whoEmptyData }
      </p>
    </div>
  )
}

export const Timer = (props) => {
  var timer_ = null
  const [timerObject, setTimerObject] = useState({})
  timer( parseInt( props.value ) )
  

  useEffect( () => {

    return() => {
      clearInterval( timer_ )
    }
  }, [timerObject, timer_]) // error

  return(
    <TimerStyle>
      <div className="timer-component flex-row" style={ { width: props.width } }>
         <div className="flex-row"> <span> {timerObject.day} </span>  天 <span>{timerObject.hour}</span> 时
          <span> {timerObject.min} </span> 分 <span> {timerObject.sec} </span> 秒 </div>
      </div>
    </TimerStyle>
  )

  function timer(expiredTime) {

    timer_ = setInterval(() => {
      let timerObj = {}
      let now = expiredTime - Date.parse(new Date()) / 1000
      if( now < 0){
        return setTimerObject({ day: 0, hour: 0, min: 0, sec: 0})
      }else{
        timerObj.day = Math.floor(now / 3600 / 24);
        timerObj.hour = Math.floor((now - timerObj.day * 3600 * 24) / 3600);
        timerObj.min = Math.floor((now - timerObj.day * 3600 * 24 - timerObj.hour * 3600) / 60);
        timerObj.sec = now - timerObj.day * 3600 * 24 - timerObj.hour * 3600 - timerObj.min * 60;
        setTimerObject(timerObj)
      }

    
    }, 1000)
  }
}